<template>
  <div class="container">
    <table class="table">
      <tr v-for="(n,index) in newTableList">
        <td v-if="n.firstArr.length>0">
          <table>
            <tr>
              <td class="font" rowspan="1000" v-if="n.title.length==2">{{n.title}}&emsp;</td>
              <td class="font" rowspan="1000" v-if="n.title.length!==2">{{n.title}}</td>
              <td class="common font" rowspan="2">出生年份</td>
              <td class="common font" rowspan="2">数量</td>
            </tr>
            <tr></tr>
            <tr v-for="item in n.firstArr">
              <td>{{item.time}}</td>
              <td>{{item.countNum}}</td>
            </tr>
          </table>
        </td>
        <td v-if="n.fxzsArr.length>0">
          <table>
            <tr class="title">
              <td colspan="4">父系指数</td>
            </tr>
            <tr class="value">
              <td>均值</td>
              <td>最大</td>
              <td>最小</td>
              <td>标准差</td>
            </tr>
            <tr v-for="item in n.fxzsArr">
              <td>{{item.fxzsAve}}</td>
              <td>{{item.fxzsMax}}</td>
              <td>{{item.fxzsMin}}</td>
              <td>{{item.fxzsStd}}</td>
            </tr>
          </table>
        </td>
        <td v-if="n.mxzsArr.length>0">
          <table>
            <tr class="title">
              <td colspan="4">母系指数</td>
            </tr>
            <tr class="value">
              <td>均值</td>
              <td>最大</td>
              <td>最小</td>
              <td>标准差</td>
            </tr>
            <tr v-for="item in n.mxzsArr">
              <td>{{item.mxzsAve}}</td>
              <td>{{item.mxzsMax}}</td>
              <td>{{item.mxzsMin}}</td>
              <td>{{item.mxzsStd}}</td>
            </tr>
          </table>
        </td>
        <td v-if="n.rltzArr.length>0">
          <table>
            <tr class="title">
              <td colspan="4">校正达100Kg日龄体重EBV</td>
            </tr>
            <tr class="value">
              <td>均值</td>
              <td>最大</td>
              <td>最小</td>
              <td>标准差</td>
            </tr>
            <tr v-for="item in n.rltzArr">
              <td>{{item.bgjrlAve}}</td>
              <td>{{item.bgjrlMax}}</td>
              <td>{{item.bgjrlMin}}</td>
              <td>{{item.bgjrlStd}}</td>
            </tr>
          </table>
        </td>
        <td v-if="n.bbzsArr.length>0">
          <table>
            <tr class="title">
              <td colspan="4">校正达100Kg体重背膘EBV</td>
            </tr>
            <tr class="value">
              <td>均值</td>
              <td>最大</td>
              <td>最小</td>
              <td>标准差</td>
            </tr>
            <tr v-for="item in n.bbzsArr">
              <td>{{item.bbhAve}}</td>
              <td>{{item.bbhMax}}</td>
              <td>{{item.bbhMin}}</td>
              <td>{{item.bbhStd}}</td>
            </tr>
          </table>
        </td>
        <td v-if="n.zzszArr.length>0">
          <table>
            <tr class="title">
              <td colspan="4">总仔数EBV</td>
            </tr>
            <tr class="value">
              <td>均值</td>
              <td>最大</td>
              <td>最小</td>
              <td>标准差</td>
            </tr>
            <tr v-for="item in n.zzszArr">
              <td>{{item.zzsAve}}</td>
              <td>{{item.zzsMax}}</td>
              <td>{{item.zzsMin}}</td>
              <td>{{item.zzsStd}}</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      res: {
        result: [
          [
            {
              time: "2014",
              countNum: "20587",
              bgjrlAve: "-0.12",
              bgjrlMax: "12.14",
              bgjrlMin: "-16.38",
              bgjrlStd: "2.68",
              bbhAve: "-0.03",
              bbhMax: "5.57",
              bbhMin: "-3.25",
              bbhStd: "0.72",
              zzsAve: "0.03",
              zzsMax: "1.95",
              zzsMin: "-1.84",
              zzsStd: "0.41",
              fxzsAve: "98.23",
              fxzsMax: "260.45",
              fxzsMin: "-39.16",
              fxzsStd: "24.88",
              mxzsAve: "102.75",
              mxzsMax: "236.47",
              mxzsMin: "0.86",
              mxzsStd: "26.87"
            },
            {
              time: "2015",
              countNum: "21124",
              bgjrlAve: "-0.27",
              bgjrlMax: "13.39",
              bgjrlMin: "-15.49",
              bgjrlStd: "2.69",
              bbhAve: "-0.02",
              bbhMax: "7.63",
              bbhMin: "-3.66",
              bbhStd: "0.82",
              zzsAve: "-0.01",
              zzsMax: "1.77",
              zzsMin: "-2.2",
              zzsStd: "0.43",
              fxzsAve: "99.89",
              fxzsMax: "217.68",
              fxzsMin: "-22.38",
              fxzsStd: "25.27",
              mxzsAve: "99.79",
              mxzsMax: "225.95",
              mxzsMin: "-16.54",
              mxzsStd: "27.27"
            },
            {
              time: "2016",
              countNum: "27010",
              bgjrlAve: "-0.48",
              bgjrlMax: "12.55",
              bgjrlMin: "-18.23",
              bgjrlStd: "2.78",
              bbhAve: "0.01",
              bbhMax: "4.23",
              bbhMin: "-3.19",
              bbhStd: "0.73",
              zzsAve: "-0.04",
              zzsMax: "1.81",
              zzsMin: "-2.15",
              zzsStd: "0.42",
              fxzsAve: "101.06",
              fxzsMax: "234.61",
              fxzsMin: "-38.74",
              fxzsStd: "25.85",
              mxzsAve: "97.44",
              mxzsMax: "206.88",
              mxzsMin: "-15.29",
              mxzsStd: "27.36"
            }
          ],
          [
            {
              time: "2014",
              countNum: "489029",
              bgjrlAve: "0.33",
              bgjrlMax: "29.69",
              bgjrlMin: "-22.77",
              bgjrlStd: "3.38",
              bbhAve: "0.02",
              bbhMax: "8.25",
              bbhMin: "-6.51",
              bbhStd: "0.85",
              zzsAve: "0.01",
              zzsMax: "3.37",
              zzsMin: "-2.59",
              zzsStd: "0.41",
              fxzsAve: "94.85",
              fxzsMax: "281.27",
              fxzsMin: "-94.09",
              fxzsStd: "24.15",
              mxzsAve: "98.05",
              mxzsMax: "278.91",
              mxzsMin: "-76.11",
              mxzsStd: "25.39"
            },
            {
              time: "2015",
              countNum: "499128",
              bgjrlAve: "-0.12",
              bgjrlMax: "28.29",
              bgjrlMin: "-25.74",
              bgjrlStd: "3.3",
              bbhAve: "-0.03",
              bbhMax: "8.41",
              bbhMin: "-6.43",
              bbhStd: "0.86",
              zzsAve: "0.0",
              zzsMax: "3.82",
              zzsMin: "-2.68",
              zzsStd: "0.44",
              fxzsAve: "98.36",
              fxzsMax: "237.86",
              fxzsMin: "-97.94",
              fxzsStd: "23.61",
              mxzsAve: "98.52",
              mxzsMax: "266.96",
              mxzsMin: "-43.38",
              mxzsStd: "25.93"
            },
            {
              time: "2016",
              countNum: "550333",
              bgjrlAve: "-0.72",
              bgjrlMax: "31.76",
              bgjrlMin: "-30.24",
              bgjrlStd: "3.55",
              bbhAve: "-0.05",
              bbhMax: "8.53",
              bbhMin: "-7.2",
              bbhStd: "0.92",
              zzsAve: "-0.01",
              zzsMax: "3.52",
              zzsMin: "-3.55",
              zzsStd: "0.44",
              fxzsAve: "102.97",
              fxzsMax: "260.88",
              fxzsMin: "-78.31",
              fxzsStd: "23.46",
              mxzsAve: "100.11",
              mxzsMax: "241.93",
              mxzsMin: "-32.66",
              mxzsStd: "25.44"
            }
          ]
        ],
        code: "200",
        message: "查询成功"
      },
      tabList: [
        "父系指数",
        "母系指数",
        // "校正达100Kg日龄体重EBV",
        "校正达100Kg体重背膘EBV",
        "总仔数EBV"
      ],
      newTableList: [],
      type: 1
    };
  },
  created() {
    this.changeDate();
  },

  mounted() {
    this.setheight();
  },
  methods: {
    setheight() {
      let $1 = document.querySelector(".title").offsetHeight;
      let $2 = document.querySelector(".value").offsetHeight;
      console.log($1, $2);
      let arr = document.querySelectorAll(".common");
      // console.log(arr);
      for (var j = 0; j < arr.length; j++) {
        arr[j].style.height = $1 + $2 + "px";
      }
    },

    changeDate() {
      if (this.type == 1) {
        this.newTableList = [
          {
            title: "种猪场",
            firstArr: [],
            fxzsArr: [],
            mxzsArr: [],
            rltzArr: [],
            bbzsArr: [],
            zzszArr: []
          },
          {
            title: "全国",
            firstArr: [],
            fxzsArr: [],
            mxzsArr: [],
            rltzArr: [],
            bbzsArr: [],
            zzszArr: []
          }
        ];
      } else if (this.type == 2) {
      }
      console.log(this.res.result);
      let arr = this.res.result;
      for (var j = 0; j < arr.length; j++) {
        // console.log(11, this.newTableList);
        for (var k = 0; k < arr[j].length; k++) {
          this.newTableList[j].firstArr.push({
            time: arr[j][k].time,
            countNum: arr[j][k].countNum
          });
          if (this.tabList.indexOf("父系指数") !== -1) {
            this.newTableList[j].fxzsArr.push({
              fxzsAve: arr[j][k].fxzsAve,
              fxzsMax: arr[j][k].fxzsMax,
              fxzsMin: arr[j][k].fxzsMin,
              fxzsStd: arr[j][k].fxzsStd
            });
          }

          if (this.tabList.indexOf("母系指数") !== -1) {
            this.newTableList[j].mxzsArr.push({
              mxzsAve: arr[j][k].mxzsAve,
              mxzsMax: arr[j][k].mxzsMax,
              mxzsMin: arr[j][k].mxzsMin,
              mxzsStd: arr[j][k].mxzsStd
            });
          }
          if (this.tabList.indexOf("校正达100Kg日龄体重EBV") !== -1) {
            this.newTableList[j].rltzArr.push({
              bgjrlAve: arr[j][k].bgjrlAve,
              bgjrlMax: arr[j][k].bgjrlMax,
              bgjrlMin: arr[j][k].bgjrlMin,
              bgjrlStd: arr[j][k].bgjrlStd
            });
          }
          if (this.tabList.indexOf("校正达100Kg体重背膘EBV") !== -1) {
            this.newTableList[j].bbzsArr.push({
              bbhAve: arr[j][k].bbhAve,
              bbhMax: arr[j][k].bbhMax,
              bbhMin: arr[j][k].bbhMin,
              bbhStd: arr[j][k].bbhStd
            });
          }
          if (this.tabList.indexOf("总仔数EBV") !== -1) {
            this.newTableList[j].zzszArr.push({
              zzsAve: arr[j][k].zzsAve,
              zzsMax: arr[j][k].zzsMax,
              zzsMin: arr[j][k].zzsMin,
              zzsStd: arr[j][k].zzsStd
            });
          }
        }
      }
      console.log(this.newTableList);
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
}
.table {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  td {
    margin: 0;
    padding: 0;
    border: none;
  }

  table {
    width: 100%;

    td {
      box-sizing: border-box;
      border: 1px solid #ebeef5;
      border-right: 0;
      padding: 6px 10px;
      color: #606266;
      font-size: 14px;
    }

    .title,
    .value,
    .font {
      color: #909399 !important;
      font-weight: 600;
      td {
        color: #909399 !important;
        font-weight: 600;
      }
    }
  }
  td:last-child {
    table {
      td {
        border-right: 1px solid #ebeef5;
      }
    }
  }
}
</style>
